<!-- 首页头部 -->
<template>
  <div class="xgy_header">
    <div class="xgy_logo">
      <img src="../assets/logo.png"
           alt="">
    </div>
    <div class="header-menu">
      <el-menu :uniqueOpened="true"
               mode="horizontal"
               default-active="1"
               class="el-menu-vertical-demo"
               background-color="#2fb7c3"
               text-color="#fff"
               active-text-color="#ffd04b">
        <el-menu-item index="1"
                      @click="tiaozhuan('Home')">
          <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="2"
                      @click="tiaozhuan('DriverHouseHome')">
          <template #title>领导驾驶舱</template>
        </el-menu-item>

        <el-menu-item index="3">
          <template #title>综合校情</template>
        </el-menu-item>
        <el-menu-item index="4">
          <template #title>数据简报</template>
        </el-menu-item>
        <el-menu-item @click="clickloginout"
                      index="5">
          <template #title>退出登录</template>
        </el-menu-item>
      </el-menu>
    </div>

  </div>
</template>

<script>
import { getDataByClassId } from '@/api/dashboard/cockpitController'
import { getAllCollegeTree } from '@/api/backend/college'
export default {
  name: "xgyheader",
  data () {
    return {

    }
  },
  async created () {
  },
  methods: {
    clickloginout () {
      this.$router.push("/")
      this.$message.success("退出登录")
    },
    async tiaozhuan (name) {

      let data = await getDataByClassId("林学201801")
      this.$store.commit("setDashBoardData", data)
      this.$router.push({ name: name })
    }
  },
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
      }
    }
  }
}
</script>

<style lang='less' scoped>
.xgy_header {
  background-color: #2fb7c3;
  display: flex;
  height: 4rem;
  justify-content: space-between;
  align-items: center;
  .xgy_logo {
    min-width: 14rem;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.1rem 0 0;
    line-height: 100%;
    align-items: center;
    img {
      padding: 0rem 0 0.15rem 0.5rem;
      width: 14rem;
      height: 3.75rem;
    }
  }

  :deep(.header-menu) {
    display: flex;
    justify-content: flex-end;
    .is-active {
      border-bottom: 0.2rem solid #fff !important;
      color: #fff !important;
    }
    .el-menu.el-menu--horizontal {
      min-width: 450px;
      border-bottom: 0rem;
      .el-menu-item {
        height: 4rem !important;
        line-height: 4rem !important;
        font-size: 1rem !important;
      }
    }
    .el-dropdown-menu__item {
      font-size: 1rem !important;
    }
  }
}
</style>